<template>
  <div class="wrapper">
    <nut-row type="flex" align="center">
      <nut-col :span="18">
        <div class="flex-content flex-content-height">
          <h1>病人流向</h1>
        </div>
      </nut-col>
      <nut-col :span="3">
        <div class="flex-content flex-content-height">
          <nut-avatar size="normal" bg-color="#fff"></nut-avatar>
        </div>
      </nut-col>
      <nut-col :span="3">
        <div class="flex-content flex-content-height">{{this.$store.state.userInfo.userName}}</div>
      </nut-col>
    </nut-row>
  </div>
</template>
<script>
export default {
  name: "IndexHeader"
  // computed:Vuex.mapState(['userName'])
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.wrapper {
  background: linear-gradient(to right, #fd3a5c, #ffc86d);
  background: -webkit-linear-gradient(to right, #fd3a5c, #ffc86d);
  color:#fff;
  padding: 10px;
}
h1 {
  font-weight: bold;
}
.userInfo {
  height: 80px;
  line-height: 80px;
}
</style>
